<template>
  <div class="shop_car">
    <van-nav-bar
      :fixed="true"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
/>
    <van-checkbox-group class="card-goods" v-model="checkedGoods">
      <van-checkbox class="card-goods__item" v-for="item in goods" :key="item.id" :name="item.id">
        <van-card
          :title="item.title"
          :price="formatPrice(item.price)"
          :desc="item.desc"
          :num="item.num"
          :thumb="item.thumb"
        />
      </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar
      :price="totalPrice"
      :disabled="!checkedGoods.length"
      :button-text="submitBarText"
      @submit="onSubmit"
    />
  </div>
</template>
 
<script>
export default {
  name: "shopCar",
  data() {
    return {
      checkedGoods: ["1", "2", "3"],
      goods: [
        {
          id: "1",
          title: "商品1",
          desc: "白色，型号12",
          price: 200,
          num: 2,
          thumb:
            "https://img.yzcdn.cn/vant/apple-2.jpg"
        },
        {
          id: "2",
          title:"商品2",
          desc: "白色，型号12",
          price: 690,
          num: 4,
          thumb:
            "https://img.yzcdn.cn/vant/apple-3.jpg"
        },
        {
          id: "3",
          title:"商品3",
          desc: "白色，型号12",
          price: 2680,
          num: 5,
          thumb:
            "https://img.yzcdn.cn/vant/apple-4.jpg"
        }
      ]
    };
  },
  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;
      return "结算" + (count ? `(${count})` : "");
    },
    totalPrice() {
      return this.goods.reduce(
        (total, item) =>
          total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price*item.num : 0),
        0
      );
    }
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1)
    },
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },
    onSubmit() {
      
    }
  }
};
</script>
 
<style lang="stylus" scoped>
.shop_car
    width 100%
    height 100%
    padding-top 0.96rem
.card-goods
    width 100%
    position relative
    background #fff
    box-sizing border-box
    text-align left 
    .card-goods__item
        position: relative;
        background-color: #fafafa;
        margin-top 0.2rem
    >>>.van-checkbox__label 
        width: 100%;
        height: auto; // temp
        padding: 0 10px 0 15px;
        box-sizing: border-box;
    >>>.van-checkbox__icon 
      top: 50%;
      left: 10px;
      z-index: 1;
      position: absolute;
      margin-top: -10px;
    >>>.van-card__price 
      color: #f44;
.van-submit-bar__text span
    display inline
.van-submit-bar
  border-top 1px solid #eee
.van-nav-bar
  border-bottom 1px solid #eee
  background #00be6e
  >>>.van-nav-bar__text
    color #fff
  .van-icon
    color #fff
</style>
